<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>五子棋</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/common.css"/>
		<style type="text/css">
		body{
	font-family: "寰蒋闆呴粦";
	padding: 0px;
	margin: 0px;
	border: 0px;
	background-image: url(../img/beijing.jpg);
	background-attachment: fixed;
	
}
			.point{
				background-color: rgba(0,0,0,1);
				border-radius: 5px;
				height: 10px;
				width: 10px;
				display: block;
			}
			#table1 td{
				height: 30px;
				width: 30px;
				box-sizing: border-box;
			}
			#table2{
				box-sizing: border-box;
			}
			.qiziW{
				height: 24px;
				width: 24px;
				border-radius: 12px;
				background-color: white;
			}
			.qiziB{
				height: 24px;
				width: 24px;
				border-radius: 12px;
				background-color: black;
			}
			#bifen{
				height: 25px;
				width: 250px;
				margin: 0 auto;
				border: 1px solid black;
			}
		</style>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var x,y;
	        var qipan = [];
			$(function () {
				$("#table1 tr").attr('align','center');
			});
			var count = 0;
			
			$(function () {
				/*
				         点击棋盘落子
				 * */
				$("#table1 tr td").each(function () {
					$(this).one('click',function (e) {
						x = ($('#table1 tr td').index(this)) % 15;    //获得棋子x坐标
						y = $('#table1 tr').index(this.parentNode);   //获得棋子y坐标
						var qizi = document.createElement('div');         //创建棋子
						//切换棋子颜色
						count++;
						if(count % 2 != 0){
							qizi.className = 'qiziB';
						}else{
							qizi.className = 'qiziW';
						}
						//隐藏棋盘坐标黑点
						if(this.firstChild){
							if($(this.firstChild).css('display') == 'block'){
								$(this.firstChild).css('display','none');
							}
						}
						//将棋子添加到棋盘上
						$(this).append(qizi);
						//判断输赢
						qpKO(x,y,count);
					});
				});
			});
			for(var i=0;i<15;i++){
		    	qipan[i] = [];
		   	}
		    for(var i=0;i<15;i++){
		    	for(var j=0;j<15;j++){
		    		qipan[i][j] = 0;
		    	}
		    }
			function qpKO(x,y,count){
		    	if(count%2 != 0){
		    		qipan[y][x] = 1; 
		    	}else{
		    		qipan[y][x] = 2;
		    	}
		    	//x轴判断输赢
		    	if(count%2 != 0){
		    		if(qipan[y][x+1] == 1){
		    			if(qipan[y][x+2] == 1){
		    				if(qipan[y][x+3] == 1){
		    					if(qipan[y][x+4] == 1){
		    						alert('黑棋赢');
		    					}else if(qipan[y][x-1] == 1){
		    						alert('黑棋赢');
		    					}
		    				}else if(qipan[y][x-1] == 1){
		    					if(qipan[y][x-2] == 1){
		    						alert('黑棋赢');
		    					}
		    				}
		    			}else if(qipan[y][x-1] == 1){
		    				if(qipan[y][x-2] == 1){
		    					if(qipan[y][x-3] == 1){
		    						alert('黑棋赢');
		    					}
		    				}
		    			}
		    		}else if(qipan[y][x-1] == 1){
		    			if(qipan[y][x-2] == 1){
		    				if(qipan[y][x-3] == 1){
		    					if(qipan[y][x-4] == 1){
		    						alert('黑棋赢');
		    					}
		    				}
		    			}
		    		}
		    	}else{
		    		if(qipan[y][x+1] == 2){
		    			if(qipan[y][x+2] == 2){
		    				if(qipan[y][x+3] == 2){
		    					if(qipan[y][x+4] == 2){
		    						alert('白棋赢');
		    					}else if(qipan[y][x-1] == 2){
		    						alert('白棋赢');
		    					}
		    				}else if(qipan[y][x-1] == 2){
		    					if(qipan[y][x-2] == 2){
		    						alert('白棋赢');
		    					}
		    				}
		    			}else if(qipan[y][x-1] == 2){
		    				if(qipan[y][x-2] == 2){
		    					if(qipan[y][x-3] == 2){
		    						alert('白棋赢');
		    					}
		    				}
		    			}
		    		}else if(qipan[y][x-1] == 2){
		    			if(qipan[y][x-2] == 2){
		    				if(qipan[y][x-3] == 2){
		    					if(qipan[y][x-4] == 2){
		    						alert('白棋赢');
		    					}
		    				}
		    			}
		    		}
		    	}
				//y轴判断输赢
				if(count%2 != 0){
		    		if(qipan[y+1][x] == 1){
		    			if(qipan[y+2][x] == 1){
		    				if(qipan[y+3][x] == 1){
		    					if(qipan[y+4][x] == 1){
		    						alert('黑棋赢');
		    					}else if(qipan[y-1][x] == 1){
		    						alert('黑棋赢');
		    					}
		    				}else if(qipan[y-1][x] == 1){
		    					if(qipan[y-2][x] == 1){
		    						alert('黑棋赢');
		    					}
		    				}
		    			}else if(qipan[y-1][x] == 1){
		    				if(qipan[y-2][x] == 1){
		    					if(qipan[y-3][x] == 1){
		    						alert('黑棋赢');
		    					}
		    				}
		    			}
		    		}else if(qipan[y-1][x] == 1){
		    			if(qipan[y-2][x] == 1){
		    				if(qipan[y-3][x] == 1){
		    					if(qipan[y-4][x] == 1){
		    						alert('黑棋赢');
		    					}
		    				}
		    			}
		    		}
		    	}else{
		    		if(qipan[y+1][x] == 2){
		    			if(qipan[y+2][x] == 2){
		    				if(qipan[y+3][x] == 2){
		    					if(qipan[y+4][x] == 2){
		    						alert('白棋赢');
		    					}else if(qipan[y-1][x] == 2){
		    						alert('白棋赢');
		    					}
		    				}else if(qipan[y-1][x] == 2){
		    					if(qipan[y-2][x] == 2){
		    						alert('白棋赢');
		    					}
		    				}
		    			}else if(qipan[y-1][x] == 2){
		    				if(qipan[y-2][x] == 2){
		    					if(qipan[y-3][x] == 2){
		    						alert('白棋赢');
		    					}
		    				}
		    			}
		    		}else if(qipan[y-1][x] == 2){
		    			if(qipan[y-2][x] == 2){
		    				if(qipan[y-3][x] == 2){
		    					if(qipan[y-4][x] == 2){
		    						alert('白棋赢');
		    					}
		    				}
		    			}
		    		}
		    	}
			    //正x 负y判断输赢
				if(count%2 != 0){
		    		if(qipan[y-1][x+1] == 1){
		    			if(qipan[y-2][x+2] == 1){
		    				if(qipan[y-3][x+3] == 1){
		    					if(qipan[y-4][x+4] == 1){
		    						alert('黑棋赢');
		    					}else if(qipan[y+1][x-1] == 1){
		    						alert('黑棋赢');
		    					}
		    				}else if(qipan[y+1][x-1] == 1){
		    					if(qipan[y+2][x-2] == 1){
		    						alert('黑棋赢');
		    					}
		    				}
		    			}else if(qipan[y+1][x-1] == 1){
		    				if(qipan[y+2][x-2] == 1){
		    					if(qipan[y+3][x-3] == 1){
		    						alert('黑棋赢');
		    					}
		    				}
		    			}
		    		}else if(qipan[y+1][x-1] == 1){
		    			if(qipan[y+2][x-2] == 1){
		    				if(qipan[y+3][x-3] == 1){
		    					if(qipan[y+4][x-4] == 1){
		    						alert('黑棋赢');
		    					}
		    				}
		    			}
		    		}
		    	}else{
		    		if(qipan[y-1][x+1] == 2){
		    			if(qipan[y-2][x+2] == 2){
		    				if(qipan[y-3][x+3] == 2){
		    					if(qipan[y-4][x+4] == 2){
		    						alert('白棋赢');
		    					}else if(qipan[y+1][x-1] == 2){
		    						alert('白棋赢');
		    					}
		    				}else if(qipan[y+1][x-1] == 2){
		    					if(qipan[y+2][x-2] == 2){
		    						alert('白棋赢');
		    					}
		    				}
		    			}else if(qipan[y+1][x-1] == 2){
		    				if(qipan[y+2][x-2] == 2){
		    					if(qipan[y+3][x-3] == 2){
		    						alert('白棋赢');
		    					}
		    				}
		    			}
		    		}else if(qipan[y+1][x-1] == 2){
		    			if(qipan[y+2][x-2] == 2){
		    				if(qipan[y+3][x-3] == 2){
		    					if(qipan[y+4][x-4] == 2){
		    						alert('白棋赢');
		    					}
		    				}
		    			}
		    		}
		    	}
			    //正y 正x判断输赢
			    if(count%2 != 0){
		    		if(qipan[y+1][x+1] == 1){
		    			if(qipan[y+2][x+2] == 1){
		    				if(qipan[y+3][x+3] == 1){
		    					if(qipan[y+4][x+4] == 1){
		    						alert('黑棋赢');
		    					}else if(qipan[y-1][x-1] == 1){
		    						alert('黑棋赢');
		    					}
		    				}else if(qipan[y-1][x-1] == 1){
		    					if(qipan[y-2][x-2] == 1){
		    						alert('黑棋赢');
		    					}
		    				}
		    			}else if(qipan[y-1][x-1] == 1){
		    				if(qipan[y-2][x-2] == 1){
		    					if(qipan[y-3][x-3] == 1){
		    						alert('黑棋赢');
		    					}
		    				}
		    			}
		    		}else if(qipan[y-1][x-1] == 1){
		    			if(qipan[y-2][x-2] == 1){
		    				if(qipan[y-3][x-3] == 1){
		    					if(qipan[y-4][x-4] == 1){
		    						alert('黑棋赢');
		    					}
		    				}
		    			}
		    		}
		    	}else{
		    		if(qipan[y+1][x+1] == 2){
		    			if(qipan[y+2][x+2] == 2){
		    				if(qipan[y+3][x+3] == 2){
		    					if(qipan[y+4][x+4] == 2){
		    						alert('白棋赢');
		    					}else if(qipan[y-1][x-1] == 2){
		    						alert('白棋赢');
		    					}
		    				}else if(qipan[y-1][x-1] == 2){
		    					if(qipan[y-2][x-2] == 2){
		    						alert('白棋赢');
		    					}
		    				}
		    			}else if(qipan[y-1][x-1] == 2){
		    				if(qipan[y-2][x-2] == 2){
		    					if(qipan[y-3][x-3] == 2){
		    						alert('白棋赢');
		    					}
		    				}
		    			}
		    		}else if(qipan[y-1][x-1] == 2){
		    			if(qipan[y-2][x-2] == 2){
		    				if(qipan[y-3][x-3] == 2){
		    					if(qipan[y-4][x-4] == 2){
		    						alert('白棋赢');
		    					}
		    				}
		    			}
		    		}
		    	}
			}
		</script>
		<!-- <script type="text/javascript">
			var url = decodeURI(window.location.search);
			var ua = url.str(3,)
		</script> -->
	</head>
	<body style="background-image: url('img/beijing.jpg');">
		<div id="bifen">
			
		</div>
		<div style="height: 421px; width: 421px; top:50%; left:50%; margin-top:-210px ;margin-left:-210px ; position: absolute; ">
			<table id="table2" border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				
			</table>
		</div>
		<div style="height: 450px; width: 450px; top:50%; left:50%; margin-top:-225px ;margin-left:-225px ; position: absolute; 
			background-color: rgba(11,11,11,0.2  ); float: left;">
			<table id="table1" border="0" cellspacing="0" cellpadding="0" height="100%" width="100%">
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td><div class="point"></div></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td><div class="point"></div></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td><div class="point"></div></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td><div class="point"></div></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td><div class="point"></div></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
			</table>
		</div>
	</body>
</html>
